<template>
  <div class="video">
    <video
      id="my-player"
      class="video-js"
      controls
      preload="auto"
      poster="./12.jpg"
      data-setup="{}"
    >
      <source src="./movie.mp4" type="video/mp4" />
      <!-- <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source> -->
      <!-- <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source> -->
      <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">
          supports HTML5 video
        </a>
      </p>
    </video>
  </div>
</template>
<script>
import videojs from "video.js";
export default {
  name: "video1",
  data() {
    return {
      name: "video1"
    };
  },
  mounted() {
    var options = {};

    var player = videojs("my-player", options, function onPlayerReady() {
      videojs.log("Your player is ready!");

      // In this context, `this` is the player that was created by Video.js.
      // this.play();2

      // How about an event listener?
      this.on("ended", function() {
        videojs.log("Awww...over so soon?!");
      });
    });
  }
};
</script>
<style></style>
